<template>
  <view v-if="data.trade">
    <up-cell-group v-if="data.delivery.delivery.value == 1">
      <up-cell title="提货方式" :value="`${data.delivery.delivery.text}`"></up-cell>
      <up-cell title="收货地址" :value="data.delivery.address"></up-cell>
      <up-cell title="收货电话" :value="data.delivery.phone"></up-cell>
    </up-cell-group>
    <up-cell-group v-if="data.delivery.delivery.value == 0">
      <up-cell title="提货方式" :value="`${data.delivery.delivery.text}-${data.delivery.store.name}`"></up-cell>
      <up-cell title="预约提货时间" :value="$filter.dateFormat(data.delivery.takeAwayBook.bookTime)"></up-cell>
      <up-cell title="提货电话" :value="data.delivery.takeAwayBook.phone"></up-cell>
      <up-cell title="仓库地址" :value="data.delivery.store.address"></up-cell>
      <up-cell title="仓库电话" :value="data.delivery.store.phone" @click="phoneCall(str)"></up-cell>
    </up-cell-group>

    <view class="u-border-top">
      <view
        class="u-p-l-20 u-p-r-20 u-p-b-30 u-p-t-30 u-border-bottom"
        v-for="(item, index) in data.goods" :key="index"
      >
        <goods-item
          type="horizontal"
          :data="item"
          size="84px"
        ></goods-item>
      </view>
    </view>

    <view class="p-10" style="line-height: 3;">
      <view class="flex-block" style="justify-content: space-between;">
        <view class="u-tips-color">商品数量:</view>
        <view>{{ data.trade.quantity }}</view>
      </view>
      <view class="flex-block" style="justify-content: space-between;">
        <view class="u-tips-color">运费:</view>
        <view>¥{{ data.delivery.deliveryPrice }}</view>
      </view>
    </view>

    <view class="u-p-l-20 u-p-r-20 u-border-top">
      <up-form ref="formRef" :rules="rules" labelWidth="100px" :model="formData">
        <up-form-item label="支付方式" prop="type" borderBottom v-if="!isKs">
          <view @click="chooseType()" v-if="formData.patType">
            <text>{{ patTypeStr }}</text>
          </view>
          <view @click="chooseType()" class="u-tips-color" v-else>请选择支付方式</view>
          <template #right>
            <up-icon
                name="arrow-right"
            ></up-icon>
          </template>
        </up-form-item>
        <up-form-item label="余额扣减" prop="coin" v-if="formData.patType == 2 || formData.patType == 3">
          <up-input
              v-model="formData.coin"
              disabledColor="#ffffff"
              placeholder="请输入扣减金额"
              border="none"
              type="digit"
          ></up-input>
          <template #label>
            <view>
              <view>余额扣减</view>
              <view class="txt-mini u-warning-dark">最高可抵扣¥{{ payInfo.coin }}</view>
            </view>
          </template>
        </up-form-item>
      </up-form>
    </view>

    <view class="p-10 u-border-top" style="line-height: 3;" v-if="payInfo.totalPrice">
      <view class="flex-block" style="justify-content: space-between;">
        <view class="u-tips-color">合计:</view>
        <view class="u-warning-dark">¥{{ payInfo.totalPrice }}</view>
      </view>
      <view class="flex-block" style="justify-content: space-between;">
        <view class="u-tips-color">余额:</view>
        <view class="u-warning-dark">¥{{ formData.coin }}</view>
      </view>
      <view class="flex-block" style="justify-content: space-between;">
        <view class="u-tips-color">微信:</view>
        <view class="u-warning-dark">¥{{ payCash }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['data', 'tradeId'],
  data() {
    return {
      allCoin: 0,
      payInfo: {},
      formData: {
        coin: 0
      },
      rules: {
        patType: [
					{
						required: true,
						message: '请选择支付方式',
						trigger: ['blur', 'change']
					}
				],
        coin: [
					{
						required: true,
						message: '请输入余额',
            // max: this.allCoin,
						trigger: ['blur', 'change']
					}
				]
      }
    }
  },
  computed: {
    payCash() {
      if (!this.data.trade.totalPrice) return 0
      const num = this.data.trade.totalPrice - this.formData.coin;
      return parseFloat(num.toFixed(2))
    },
    patTypeStr() {
      if (!this.formData.patType) return '';
      return this.payInfo.payTypes.find(v => v.value == this.formData.patType).text
    },
    isKs() {
      return uni.getSystemInfoSync().host === 'KUAISHOU'
    }
  },
  mounted() {
    this.getwallet();
    this.getPayInfo();
  },
  methods: {
    async getwallet() {
      const { data } = await this.$api.order.wallet()
      this.allCoin = data.coin;
    },
    getPayInfo() {
      this.$api.order.checkstand({tradeId: this.tradeId}).then(res => {
        this.payInfo = res.data;
        this.formData.patType = this.payInfo.payTypes[0].value;
      })
    },
    async chooseType() {
      uni.showActionSheet({
        itemList: this.payInfo.payTypes.map(v => v.text),
        success: (res) => {
          this.formData.coin = this.payInfo.totalPrice;
          this.formData.patType = res.tapIndex + 1;
        }
      })
    },
    phoneCall(str) {
      uni.makePhoneCall({
        phoneNumber: str
      })
    }
  },
}
</script>

<style lang="scss" scoped>

</style>